<template>
  <el-card class="task-card" shadow="hover" @click="handleViewDetail(task)">
    <div class="task-header">
      <div class="task-info">
        <h3 class="task-title">{{ task.name }}</h3>
        <el-tag :type="getTaskTypeColor(task.type)" size="small">
          {{ getTaskTypeName(task.type) }}
        </el-tag>
        <el-tag :type="getStatusColor(task.status)" size="small" style="margin-left: 8px">
          {{ getStatusName(task.status) }}
        </el-tag>
      </div>
      <div class="task-reward">
        <span class="reward-amount">¥{{ task.reward }}</span>
      </div>
    </div>

    <p class="task-description">{{ task.description }}</p>

    <div class="task-location">
      <div class="location-item">
        <el-icon>
          <LocationFilled/>
        </el-icon>
        <span>起点：{{ task.originAddress }}</span>
      </div>
      <div class="location-item">
        <el-icon>
          <Location/>
        </el-icon>
        <span>终点：{{ task.destAddress }}</span>
      </div>
    </div>

    <div class="task-details">
      <div class="detail-item">
        <el-icon>
          <Clock/>
        </el-icon>
        <span>截止：{{ task.deadline }}</span>
      </div>
      <div class="detail-item">
        <el-icon>
          <MapLocation/>
        </el-icon>
        <span>距离：{{ task.distance }}km</span>
      </div>
      <div class="detail-item">
        <el-icon>
          <Timer/>
        </el-icon>
        <span>预计：{{ task.estimatedTime }}分钟</span>
      </div>
    </div>

    <div class="publisher-info">
      <el-avatar :icon="UserFilled" :size="32" :src="task.publisherAvatar"/>
      <div class="publisher-details">
        <span class="publisher-name">{{ task.publisherName }}</span>
        <span class="start-distance">{{ task.startDistance || '未知距离' }}</span>
      </div>
      <div class="task-actions" @click.stop>
        <!--        <el-button @click="handleCollectTask(task)">-->
        <!--          <el-icon>-->
        <!--            <Star/>-->
        <!--          </el-icon>-->
        <!--          收藏-->
        <!--        </el-button>-->
        <el-button type="primary" @click="handleAcceptTask(task)">
          <el-icon>
            <List/>
          </el-icon>
          接单
        </el-button>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import {inject} from 'vue'
import {ElMessage} from 'element-plus'
import {Clock, List, Location, LocationFilled, MapLocation, Timer, UserFilled} from '@element-plus/icons-vue'
import request from '@/utils/request'
import {confirm} from "@/utils/utils.js";

// 1. 接收唯一的 props
const props = defineProps({
  task: {
    type: Object,
    required: true
  }
})

const openDetailDialog = inject('openDetailDialog')
const refreshTaskList = inject('refreshTaskList')

// 查看详情
const handleViewDetail = (task) => {
  if (openDetailDialog) {
    openDetailDialog(task)
  }
}

// 收藏任务
const handleCollectTask = async (task) => {
  await request.post('/collect', {businessId: task.id})
  ElMessage.success('已收藏任务')
}

// 接单
const handleAcceptTask = async (task) => {
  confirm('是否确认接单', async () => {
    await request.post('/task/pick/' + task.id)
    ElMessage.success('接单成功')
    // 接单后需要刷新列表，调用从父组件注入的方法
    if (refreshTaskList) {
      refreshTaskList()
    }
  })
}

const getTaskTypeName = (type) => {
  const types = {1: '代购', 2: '代取快递', 3: '代办事务'}
  return types[type] || '未知'
}

const getTaskTypeColor = (type) => {
  const colors = {1: 'primary', 2: 'success', 3: 'warning'}
  return colors[type] || 'info'
}

const getStatusName = (status) => {
  const statuses = {1: '待接单', 2: '进行中', 3: '已完成', 4: '已取消', 5: '已关闭'}
  return statuses[status] || '未知'
}

const getStatusColor = (status) => {
  const colors = {1: 'warning', 2: 'primary', 3: 'success', 4: 'danger', 5: 'info'}
  return colors[status] || 'info'
}
</script>

<style scoped>
.task-card {
  margin-bottom: 20px;
  border-radius: 12px;
  cursor: pointer;
  height: 280px;
  transition: all 0.3s ease;
}

.task-card:hover {
  transform: translateY(-2px);
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.task-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #303133;
}

.reward-amount {
  font-size: 20px;
  font-weight: 600;
  color: #ff4757;
}

.task-description {
  color: #606266;
  margin-bottom: 1px;
  line-height: 1.5;
  height: 30px; /* 固定描述区域的高度 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
  display: -webkit-box; /* 兼容WebKit浏览器 */
  -webkit-line-clamp: 1; /* 限制为3行 */
  -webkit-box-orient: vertical; /* 垂直方向布局 */
}

.location-item {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
}

.task-location,
.task-details {
  /* 确保这些区域也有足够且固定的空间 */
  height: auto; /* 或根据内容设定固定高度 */
  min-height: 20px; /* 确保至少有一行的高度 */
  overflow: hidden; /* 防止内容溢出 */
}

.location-item,
.detail-item {
  white-space: nowrap; /* 防止内容换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}

.task-details {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #909399;
}

.publisher-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}

.publisher-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.publisher-name {
  font-weight: 500;
  color: #303133;
}

.start-distance {
  font-size: 12px;
  color: #909399;
}

.task-actions {
  display: flex;
  gap: 8px;
}
</style>